<template>
  <div class="salon_diagnose_6c">
    <div class="diagnose_6c_table">
      <table border="0" cellpadding="3">
        <colgroup>
          <col span="2" style="border: 2px solid #d2dcf4" />
          <col span="3" style="background-color: none" />
        </colgroup>
        <tr>
          <th rowspan="6" style="width: 120px">C1 一人一案</th>
          <th style="width: 160px"></th>
          <th>执行度</th>
          <th>（易用性）执行反馈</th>
          <th>（有效性）执行反馈</th>
        </tr>
        <tr v-for="item in c1List">
          <th>{{ item.name }}</th>
          <td @click.stop="handleChangeRate(item.attr, 'das1', $event)">
            <el-rate v-model="form[item.attr].das1" :max="3"></el-rate>
          </td>
          <td @click.stop="handleChangeRate(item.attr, 'das2', $event)">
            <el-rate v-model="form[item.attr].das2" :max="3"></el-rate>
          </td>
          <td @click.stop="handleChangeRate(item.attr, 'das3', $event)">
            <el-rate v-model="form[item.attr].das3" :max="3"></el-rate>
          </td>
        </tr>
      </table>
      <table border="0" cellpadding="3" style="width: 90%;">
        <colgroup>
          <col
            span="2"
            style="border-left: 2px solid #d2dcf4; border-right: 2px solid #d2dcf4; border-bottom: 2px solid #d2dcf4" />
          <col span="4" style="background-color: none" />
        </colgroup>
        <tr>
          <th rowspan="20" style="width: 120px">C2 标准化</th>
          <th style="width: 160px"></th>
          <th></th>
          <th>评分</th>
          <th>缺项</th>
          <th>说明</th>
        </tr>
        <tr v-for="item in c2List">
          <th v-if="item.id === 20" rowspan="8">五感六觉</th>
          <th v-else-if="item.id === 28" rowspan="7">客户体感</th>
          <th v-else-if="item.id === 35" rowspan="4">体系实施</th>
          <td style="text-align: left">
            <!-- <span v-if="item.name.length < 40">{{ item.name }}</span>
            <el-tooltip v-else class="item" effect="dark" :content="item.name" placement="top-start">
              <span>{{ item.name.substring(0, 38) + '...' }}</span>
            </el-tooltip> -->
            {{ item.name }}
          </td>
          <td style="width: 110px" @click.stop="handleChangeRate(item.attr, 'dsd1', $event)">
            <el-rate v-model="form[item.attr].dsd1" :max="3"></el-rate>
          </td>
          <td>
            <el-input
              v-model="form[item.attr].dsd2"
              type="textarea"
              maxlength="128"
              show-word-limit
              clearable
              size="small"
              style="width: 180px"></el-input>
          </td>
          <td>
            <el-input
              v-model="form[item.attr].dsd3"
              type="textarea"
              maxlength="100"
              show-word-limit
              clearable
              size="small"
              style="width: 180px"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div>
      <el-button v-if="isUpdating" type="primary" size="medium" disabled icon="el-icon-loading" style="width: 120px">
        提交中
      </el-button>
      <el-button v-else-if="form.id === undefined" type="primary" size="medium" @click="handleSubmitForm(true)">保存</el-button>
      <el-button v-else type="warning" size="medium" @click="handleSubmitForm(false)">修改</el-button>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getOpaCDiagnoseByNo, saveOpaCDiagnoseByNo } from '@/api/diagnose';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const EmptyOpaCData = {
  id: undefined,
  c11: { das1: 0, das2: 0, das3: 0 },
  c12: { das1: 0, das2: 0, das3: 0 },
  c13: { das1: 0, das2: 0, das3: 0 },
  c14: { das1: 0, das2: 0, das3: 0 },
  c15: { das1: 0, das2: 0, das3: 0 },
  c20: { dsd1: 0, dsd2: '', dsd3: '' },
  c21: { dsd1: 0, dsd2: '', dsd3: '' },
  c22: { dsd1: 0, dsd2: '', dsd3: '' },
  c23: { dsd1: 0, dsd2: '', dsd3: '' },
  c24: { dsd1: 0, dsd2: '', dsd3: '' },
  c25: { dsd1: 0, dsd2: '', dsd3: '' },
  c26: { dsd1: 0, dsd2: '', dsd3: '' },
  c27: { dsd1: 0, dsd2: '', dsd3: '' },
  c28: { dsd1: 0, dsd2: '', dsd3: '' },
  c29: { dsd1: 0, dsd2: '', dsd3: '' },
  c30: { dsd1: 0, dsd2: '', dsd3: '' },
  c31: { dsd1: 0, dsd2: '', dsd3: '' },
  c32: { dsd1: 0, dsd2: '', dsd3: '' },
  c33: { dsd1: 0, dsd2: '', dsd3: '' },
  c34: { dsd1: 0, dsd2: '', dsd3: '' },
  c35: { dsd1: 0, dsd2: '', dsd3: '' },
  c36: { dsd1: 0, dsd2: '', dsd3: '' },
  c37: { dsd1: 0, dsd2: '', dsd3: '' },
  c38: { dsd1: 0, dsd2: '', dsd3: '' },
  coachId: null,
  coachName: null,
};

const EmptyC = {
  name: '', // AttrC.name
  attr: '', // AttrC.value
  id: 0, // AttrC.value.substring(1)
};

const AttrC = [
  { value: 'c11', name: '《服务单》接待环节' },
  { value: 'c12', name: '《服务单》咨询环节' },
  { value: 'c13', name: '《服务单》操作环节' },
  { value: 'c14', name: '《服务单》客情环节' },
  { value: 'c15', name: '《咨询单》咨客环节' },
  { value: 'c20', name: '顾客到院动线（院外及大门）视觉内，宣传、海报等物料无破损，无脏污，内容能有效传递信息' },
  { value: 'c21', name: '院内休息区、操作区摆放整齐且整洁' },
  { value: 'c22', name: '院内海报、台卡等视觉宣传品摆放合理，无破损，内容及时更新且有效传递' },
  { value: 'c23', name: '院内茶水软饮、小零食等准备充足，并摆放到位' },
  { value: 'c24', name: '院内硬件设施（灯光、音响、屏幕等）正常使用' },
  { value: 'c25', name: '屏幕播放内容，音响背景音乐：内容恰当，音量合适' },
  { value: 'c26', name: '顾客动线院内部分：干净整洁、无异味、无明显垃圾和污渍' },
  { value: 'c27', name: '工作人员按院内规范，衣着整齐、平整、干净，无损机构形象' },
  { value: 'c28', name: '每个顾客触点使用带有“请、您好、谢谢、再见”等礼貌用语' },
  { value: 'c29', name: '与顾客交流时亲切友好，面带微笑，体现优质服务和温度感' },
  { value: 'c30', name: '营业时段，确保迎宾口无空岗，顾客出现在门店外时，主动上前微笑迎宾' },
  { value: 'c31', name: '接待人员合理安排顾客就坐，并按流程完成顾客系统创建和候诊' },
  { value: 'c32', name: '按《服务单》提示做出对应动作或回避特定提示，合理恰当地引导顾客等候2分钟' },
  {
    value: 'c33',
    name: '咨询环节：依据《服务单》，以顾客为中心（不受空间和时间的束缚）因人而异，满足专业/客情/合规等需求',
  },
  { value: 'c34', name: '操作环节：依据《服务单》，以顾客为中心，满足专业/顾客至上等需求' },
  {
    value: 'c35',
    name: 'TAG系统：给顾客完善消费等级、消费能力、运营状态、信任阶段、重点等五类标签，且有效指导客户成交动作和私域动作',
  },
  { value: 'c36', name: 'TAG系统：私域活动功能及其私域运营（线下活动动作）有效结合，且执行闭环' },
  { value: 'c37', name: 'TAG系统：有效参与商学院活动，融合《咨询单/服务单》，有效执行咨客成交' },
  { value: 'c38', name: 'TAG系统：时间线、成交数据与院内复盘融合，有效实施' },
];

export default {
  name: 'Diagnose6c',
  data() {
    return {
      salon: {},
      form: EmptyOpaCData,
      rateForm: {}, // 处理 Rate 组件不能取消第一颗星星的问题
      rules: {},
      isUpdating: false,
      isFetching: false,
      c1List: [EmptyC], // C1 一人一案
      c2List: [EmptyC], // C2 标准化
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
  },
  created() {
    this.c1List.splice(0, this.c1List.length);
    this.c2List.splice(0, this.c2List.length);
    AttrC.forEach(x => {
      const id = Number.parseInt(x.value.substring(1));
      if (id < 20) {
        this.c1List.push({ name: x.name, attr: x.value, id: id });
      } else {
        this.c2List.push({ name: x.name, attr: x.value, id: id });
      }
    });
  },
  methods: {
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      this.loadDiagnose6c();
    },
    /**
     * 处理 Rate 组件不能取消第一颗星星的问题
     *
     * @param {string} name 属性
     * @param {string} attr 字段
     * @param {Event} event 发生点击事件的星星标签
     */
    handleChangeRate: async function (name, attr, event) {
      const target = event.target;
      const prec = this.rateForm[name];
      let preScore = 0;
      if (prec && prec[attr] !== undefined) {
        preScore = prec[attr];
      }
      if (preScore === 1 && target.classList && target.classList.contains('el-icon-star-on')) {
        this.form[name][attr] = 0;
        this.rateForm[name][attr] = 0;
      } else {
        if (prec) {
          this.rateForm[name][attr] = this.form[name][attr];
        } else {
          this.rateForm[name] = {};
          this.rateForm[name][attr] = this.form[name][attr];
        }
      }
    },
    loadDiagnose6c: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      this.form = Object.assign({}, EmptyOpaCData);
      const errAlertMsg = '查询C活动复盘信息失败';
      await getOpaCDiagnoseByNo(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.form.id = ret.id;
            AttrC.forEach(x => {
              if (ret[x.value]) {
                const id = Number.parseInt(x.value.substring(1));
                if (id < 20) {
                  this.form[x.value].das1 = ret[x.value].das1;
                  this.form[x.value].das2 = ret[x.value].das2;
                  this.form[x.value].das3 = ret[x.value].das3;
                } else {
                  this.form[x.value].dsd1 = ret[x.value].dsd1;
                  this.form[x.value].dsd2 = ret[x.value].dsd2;
                  this.form[x.value].dsd3 = ret[x.value].dsd3;
                }
              }
            });
          }
        })
        .catch(err => {
          console.log('getOpaCDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
    handleSubmitForm: async function (isadd) {
      const row = this.form;
      // Validate row data against rules
      for (const key in this.rules) {
        if (this.rules.hasOwnProperty(key)) {
          const rule = this.rules[key][0];
          if (rule.required && (row[key] === undefined || row[key] === null)) {
            MessageBox.alert(rule.message);
            return;
          }
          if (rule.type === 'array' && row[key].length < rule.min) {
            MessageBox.alert(rule.message);
            return;
          }
          if (rule.type === 'number' && typeof row[key] !== 'number') {
            MessageBox.alert(rule.message);
            return;
          }
        }
      }

      if (row.id <= 0) {
        row.id = null;
      }

      this.isUpdating = true;
      const errAlertMsg = '保存C活动复盘信息失败';
      saveOpaCDiagnoseByNo(this.salon.diagnoseNo, row)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.loadDiagnose6c();
          MessageBox.alert('保存成功');
        })
        .catch(err => {
          console.log('saveOpaCDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isUpdating = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/salonmodel.scss';

.salon_diagnose_6c {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;

  .diagnose_6c_table {
    width: 100%;
    display: block;
  }

  .diagnose_6c_table table {
    border-collapse: collapse;
  }

  .diagnose_6c_table th {
    @extend .salon_model_lable_th;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ebeef5;
  }
  .diagnose_6c_table td {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #ebeef5;
  }

  .diagnose_6c_table td .in_td_title {
    margin: 0 5px 0 0;
  }
}
</style>
